/*
 * @Author: 康为 18037890117@163.com
 * @Date: 2023-07-13 16:28:18
 * @LastEditors: 康为 18037890117@163.com
 * @LastEditTime: 2023-07-13 16:49:19
 * @FilePath: /umi-max/src/components/TextMore/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useRef } from 'react';
import { Typography } from 'antd';

interface TextProps {
  text: string;
  rows?: number;
}
const { Paragraph } = Typography;

const Ellipsis: React.FC<TextProps> = ({ text, rows = 2 }) => {
  const [visible, setVisible] = useState(false);
  const [dateTime, setDateTime] = useState(new Date().getTime());
  const ref = useRef(null);
  return (
    <Paragraph
      key={dateTime}
      ellipsis={{
        rows: rows,
        expandable: true,
        onExpand: () => {
          setVisible(true);
        },
      }}
      ref={ref}
    >
      {text}
      {visible && (
        <a
          onClick={() => {
            setVisible(false);
            setDateTime(new Date().getTime());
          }}
          style={{ marginLeft: 2 }}
        >
          收起
        </a>
      )}
    </Paragraph>
  );
};

export default Ellipsis;
